<!-- 课程详情页 -->
<script setup>
// 刷新数据丢失
const name = JSON.parse(localStorage.getItem('course')).courseName
const avatar = JSON.parse(localStorage.getItem('course')).courseImage
</script>

<template>
  <div class="my-layout">
    <el-container>
      <el-header class="header">
        <HeaderView></HeaderView>
      </el-header>
      <el-container class="course-container">
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="height: 100vh"
            router
          >
            <el-menu-item index="1" :style="{ 'background-color': 'transparent' }" id="course-item">
              <el-image class="course-avater" :src="avatar"></el-image>
              <span>{{ name }}</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/chapter">
              <el-icon><setting /></el-icon>
              <span>章节</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/notice">
              <el-icon><setting /></el-icon>
              <span>通知</span> </el-menu-item
            ><el-menu-item index="/coursedetail/exam">
              <el-icon><setting /></el-icon>
              <span>考试</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/HomeworkView">
              <el-icon><setting /></el-icon>
              <span>作业</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/CourseWare">
              <el-icon><setting /></el-icon>
              <span>课件</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/DiscussionView">
              <el-icon><setting /></el-icon>
              <span>讨论</span>
            </el-menu-item>
            <el-menu-item index="/coursedetail/QuestionBank">
              <el-icon><setting /></el-icon>
              <span>题库</span> </el-menu-item
            ><el-menu-item index="/coursedetail/StatisticView">
              <el-icon><setting /></el-icon>
              <span>统计</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.my-layout {
  background: #f0efef;
  height: 100vh;

  .header {
    margin: 0;
    padding: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
  }
  //课程主题
  .course-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-menu-vertical-demo {
      padding-top: 110px;

      #course-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 200px;
        border-bottom: 1px solid #e6e6e6;

        .course-avater {
          width: 150px;
          height: 130px;
        }
      }
    }
  }
}
</style>
